<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
		<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPentoI96s6s140JhpPqs1PPZKGQ1GF-4&sensor=false&language=hr&libraries=places"></script>
	
		<script>
      			function initialize() {
    				geocoder = new google.maps.Geocoder();
        			var mapOptions = {
          				center: new google.maps.LatLng(43.85, 18.25),
          				zoom: 8,
          				mapTypeId: google.maps.MapTypeId.ROADMAP
        			};
        			var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
      				var userInput = document.getElementById('place');
        			var autocomplete = new google.maps.places.Autocomplete(userInput);
        			autocomplete.bindTo('bounds', map);
        			var infowindow = new google.maps.InfoWindow();
        			var marker = new google.maps.Marker({
          			map: map
        			});
				google.maps.event.addListener(autocomplete, 'place_changed', function() {
          			infowindow.close();
          			marker.setVisible(false);

          			var place = autocomplete.getPlace();
          			if (!place.geometry) {
            			   return;
          			}

          			if (place.geometry.viewport) {
            				map.fitBounds(place.geometry.viewport);
          			} else {
            				map.setCenter(place.geometry.location);
            				map.setZoom(17);  
          			}
          			var image = new google.maps.MarkerImage(
              			place.icon,
              			new google.maps.Size(71, 71),
              			new google.maps.Point(0, 0),
              			new google.maps.Point(17, 34),
              			new google.maps.Size(35, 35));
          			marker.setIcon(image);
          			marker.setPosition(place.geometry.location);
				 var address = '';
          			if (place.address_components) {
            			address = [
              			(place.address_components[0] && place.address_components[0].short_name || ''),
              			(place.address_components[1] && place.address_components[1].short_name || ''),
              			(place.address_components[2] && place.address_components[2].short_name || '')
            			].join(' ');
          			}
          			infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
          			infowindow.open(map, marker);
        			});
      			}

		</script>

		<style>
			html { height: 100% }
			body { height: 100%; margin: 0; padding: 0 }
			#map_result{width:100%; height:100%;}
			#map_canvas{width:100%; height:90%;padding:0;}
  		</style>

	</head>
	<body>
		<div data-role="page" id="map_result">
    		<div data-role="header">
			<input type="text" id="place" size="50" />
		</div>

		<body onload="initialize()">

		<div id="map_canvas"></div>
		<div id="panel"</div>
       
	</body>
</html>

